<template>
  <div class="editors-list">
    <header>
      <i class="icon iconfont icon-back" @click="back"></i>
      <span class="text">主编</span>
    </header>
    <ul class="list" ref="editorList">
      <li class="item vux-1px-b" v-for="item in data" @click="gotoEditorPage(item.id, item.name)">
        <div class="wrap">
          <img v-lazy="item.avatar" alt="">
          <span class="name">{{item.name}}</span>
          <span class="bio">{{item.bio}}</span>
          <i class="icon iconfont icon-more"></i>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  import axios from "axios";
  export default {
    data() {
      return {
        data: []
      };
    },
    created() {
      this.getEditorData();
    },
    methods: {
      getEditorData() {
        axios.get("api/theme/" + this.$route.params.id).then(res => {
          this.data = res.data.editors;
        });
      },
      back() {
        this.$router.go(-1);
      },
      gotoEditorPage(id, name) {
        this.$router.push({
          name: 'editor',
          params: {
            editorId: id,
            editorName: name
          }
        })
      }
    }
  };

</script>
<style lang="less" scoped>
  .editors-list {
    header {
      position: fixed;
      width: 100%;
      height: 44px;
      line-height: 44px;
      z-index: 1;
      font-size: 20px;
      color: #ffffff;
      background-color: #1ba3ea;
      .icon-back {
        height: 100%;
        font-size: 26px;
        padding: 0 15px;
      }
      .text {
        position: absolute;
        width: 44px;
        height: 100%;
        top: 0;
        left: 50%;
        margin-left: -22px;
      }
    }
    .list {
      padding-top: 44px;
      padding-left: 0;
      .item {
        height: 50px;
        width: 100%;
        .wrap {
          height: 100%;
          line-height: 50px;
          padding: 0 15px;
          img {
            position: absolute;
            top: 50%;
            left: 20px;
            width: 36px;
            height: 36px;
            margin-top: -18px;
            border-radius: 50%;
          }
          .name {
            position: absolute;
            top: -6px;
            left: 70px;
            font-size: 16px;
          }
          .bio {
            position: absolute;
            top: 14px;
            left: 70px;
            font-size: 12px;
            color: #b0b0b0;
            letter-spacing: 2px;
          }
          .icon {
            position: absolute;
            top: 0;
            right: 15px;
            font-size: 22px;
            color: #cccccc;
          }
        }
      }
    }
  }

</style>
